<!DOCTYPE html>
<html lang="en" xmlns:style="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            display: inline-block;
            font-size: 12px; /*设置文字字号*/
            color: #830000; /*设置文字颜色*/
            font-weight: bold; /*设置字体加粗*/
        }

        .box {
            border: 1px solid red;
            width: 700px;
            overflow: hidden;//闭合浮动，对box使用overflow：hidden
        }

        .div1 {
            float: left;
            background: #00752d;
            width: 200px;
            height: 100px;
        }

        .div2 {
            float: left;
            background: #ff5583;
            width: 100px;
            height: 200px;
        }
        .div3 {
            background: #2f4956;
            width: 100px;
            height: 200px;
        }
    </style>
</head>
<body>
<!--
块级元素,独占一行 线性布局 方向:竖直方向
行内元素, 线性布局,方向:水平方向  没有宽高 全部都是根据内容(相当android :wrap-content) display:inline-block;
这句话一定要加 否则20px就没有用


常用的块状元素(block)有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素(inline)有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>
-->

<p>块级元素,独占一行 线性布局 方向:竖直方向</p>

<a style="font-style:italic">胆小如鼠</a>


inline （行内元素）:
不会独占一行.
不能更改 height，width的值，大小由内容撑开.
可以使用padding上下左右都有效，margin只有left和right有效，但是top和bottom就不行.

block （块级元素）:
 独占一行，在不设置自己的宽度的情况下， 默认填满父级元素的宽度.
能够改变 height，width的值.
可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.

inline-block （融合行内于块级）:
结合了inline与block的一些特点，
不会独占一行.
能够改变 height，width的值.
设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果
用通俗的话讲，就是不独占一行的块级元素。


<br/>

<a href="https://www.cnblogs.com/Ry-yuan/p/6848197.html">参考文献,使用inline-block 在某些情况下可以替代float</a>

<div class="box">
    <div class="div1">111</div>
    <div class="div2">222</div>
    <div class="div3">222</div>
</div>


</body>
</html>